<template>
  <a-input
    v-bind="$attrs"
    :size="size"
    :value="state"
    class="customer-input"
    allowClear
  >
    <template #addonAfter>
      <CountButton
        :size="size"
        :count="count"
        :value="state"
        :beforeStartFunc="sendCodeApi"
      />
    </template>
  </a-input>
</template>

<script lang="ts">
import { useRuleFormItem } from "@/hooks/component/useFormItem";
import CountButton from "./CountButton.vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: { CountButton },
  props: {
    size: {
      type: String,
      default: "large",
    },
    value: {
      type: String,
    },
    count: {
      type: Number,
      default: 60,
    },
    sendCodeApi: {
      type: Function,
      default: null,
    },
  },
  setup(props) {
    const [state] = useRuleFormItem(props);
    return { state };
  },
});
</script>

<style lang="scss" scoped>
  /deep/.customer-input {
    border: none !important;
    box-shadow: none;
    
  }
</style>
